<template>
	<view class="help_list df-yc">
		<view class="help_box df-yc w100 h100 br-20">
			<view class="shsc help_head df-c fb fs32 ab-xc bg-c">
				成事排行榜
			</view>
			<view style="position: absolute;left: 0;top: 0;">
				<image style="width: 200rpx;" :src="temImgUrl+'/nodegamehw.png'" mode="widthFix"></image>
			</view>
			<view class="list w100 fs28 fb">
				<view class="list_item df-xb ai" v-for="(item,index) in rankingList.list" :key="index">
					<view style="margin-right: 40rpx;" class="medal df-c">
						<text style="font-family: DIN Alternate;color: #E3AB6E;" class="fs36 fb" v-if="index>2"><text
								v-if="index<9">0</text>{{index+1}}</text>
						<image v-if="index<=2" :src="item.ico" mode="widthFix"></image>
					</view>
					<view style="flex:1" class="user df ai">
						<view class="user_img br-cir">
							<image style="height: 70rpx;width: 70rpx;" :src="item.avatar" mode="heightFix"></image>
						</view>
						<view class="user_name one-t">
							{{item.nickname}}
						</view>
					</view>
					<view style="flex:1" class="contribute_value df shsc fs28 ">
						<view class=" df-c">
							<view style="flex:1;width: 200rpx;justify-content: flex-end;" class="one-t df pr10">
								{{item.contribution}}</view>
							<view style="flex-shrink:0 ;">贡献值</view>
						</view>
					</view>
				</view>
			</view>
			<view class="list_ranking fs28 fb">
				<view class="list_item df-xb ai">
					<view style="justify-content: space-between;margin-right: 40rpx;" class="medal df-c">
						<view class="df-yc" style="font-size: 20rpx;"><text>当前</text><text>排名</text></view>
						<view class="df-c ai" style="font-size: 42rpx;">
							<text v-if="rankingList.user.rank<10">0</text>{{rankingList.user.rank}}
						</view>
					</view>
					<view style="flex:1" class="user df ai">
						<view class="user_img br-cir">
							<image style="height: 70rpx;width: 70rpx;" :src="rankingList.user.avatar" mode="heightFix"></image>
						</view>
						<view class="user_name one-t">
							{{rankingList.user.nickname||"用户"}}
						</view>
					</view>
					<view style="flex:1" class="contribute_value df shsc fs28 ">
						<view class=" df-c">
							<view style="flex:1;width: 200rpx;justify-content: flex-end;" class="one-t df pr10">{{rankingList.user.contribution}}
							</view>
							<view style="flex-shrink:0 ;">贡献值</view>
						</view>
					</view>
				</view>
				<view class="ranking_info fs24 bg-c bs df-xc">
					<view class="info pb20 df-y">
						<view class="goal df">距前一名仅差<span class="span">{{parseInt(rankingList.user.contribution_difference)}}</span>贡献值</view>
						<view class="award_desc df">
							<div style="text-align: justify;" class="desc">
								成功开奖将分得价值<span class="span">{{rankingList.user.can_get_money}}元</span>的奖品，上升一名将多得<span class="span">{{rankingList.user.more_get_money}}元</span>奖品
							</div>
						</view>
					</view>
				</view>
				<view @click="jump('/pages/public/poster/index',{posterType:'seal',shareType:'node_game'})" class="invate_btn fb df-c">
					邀请好友获得贡献值
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: '',
		components: {

		},
		data: function() {
			return {
			temImgUrl:this.$IMG_URL_TEMP
			}
		},
		computed: {
			rankingList() {
				return this.$store.state.user.rankingList
			},
		},
		methods: {
			jump(path,params){
				this.$Router.push({
					path:path,
					params:params
				})
			}
		},
		created() {},
		mounted() {},
	}
</script>

<style scoped lang="scss">
	.help_list {
		.user_name{
			width: 220rpx;
		}
		.help_box {
			background-color: #622128;
			border: 1rpx solid #E3AB6E;
			position: relative;
			min-height: 150rpx;

			.help_head {
				width: 489rpx;
				top: -17rpx;
				background-image: url(#{$IMG_URL}/biaoti2.png);
				height: 86rpx;
				color: #E3AB6E;
				z-index: 10;
			}

			.list,
			.list_ranking {
				padding: 100rpx 30rpx 0 30rpx;
				color: #ffffff;
				font-weight: 400;
				height: 100%;
				width: 100%;
				overflow: hidden;
				border-radius:0 0 20rpx 20rpx ;

				.list_item {
					height: 130rpx;
					border-bottom: 1rpx solid rgba(227, 171, 110, 0.06);

					.medal {
						width: 104rpx;
						overflow: hidden;
					}

					.user {
						//margin-left: -120rpx;
						// justify-self: flex-start;

						.user_img {
							width: 70rpx;
							height: 70rpx;
							overflow: hidden;
							background-color: #CCE6FF;
							margin-right: 22rpx;
						}
					}

					.contribute_value {
						justify-content: flex-end;
						width: 180rpx;
						color: #E3AB6E;
						font-style: italic;
					}
				}

				.list_item:last-child {
					border-bottom: none;
				}

			}

			.list_ranking {
				padding: 30rpx 30rpx 0 30rpx;
				margin-top: 0;
				background-color: #481419;

				.medal {
					color: #E3AB6E;
					font-weight: 600;
				}

				.ranking_info {
					width: 630rpx;
					background: #581E24;
					border-radius: 20rpx;
					padding: 0 30rpx;
					font-weight: 400;

					.span {
						color: #E3AB6E;
						margin: 0 5rpx;
					}

					.goal {
						height: 82rpx;
						align-items: center;
					}

					.award_desc {
						flex: 1;
						align-items: center;

						.desc {}
					}
				}

				.invate_btn {
					width: 630rpx;
					height: 88rpx;
					background: linear-gradient(270deg, #B18540, #F7D9AA);
					border-radius: 44rpx;
					color: #622128;
					margin: 50rpx 0;
				}
			}
		}
	}
</style>
